<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script  type="application/javascript" language="javascript" src="../js/jquery.js"></script>
<script  type="application/javascript" language="javascript" src="../js/jquery-ui.js"></script>
<script  type="application/javascript" language="javascript" src="../js/ui/ui.tabs.js"></script>
<script  type="application/javascript" language="javascript" src="../js/fns.js"></script>
</head>

<body>
<script type="text/javascript">
	$(function() {
		$("#tabs").tabs();
	});
	</script>

<style type="text/css">
.ui-tabs { padding: .2em; zoom: 1; }
.ui-tabs .ui-tabs-nav { list-style: none; position: relative; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { position: relative; float: left; border-bottom-width: 0 !important; margin: 0 .2em -1px 0; padding: 0; }
.ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none; padding: .5em 1em; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 1px; border-bottom-width: 0; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block; border-width: 0; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }

</style>

<div class="demo">

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
        <li><a href="#tabs-4">njarebbbbb</a></li>
	</ul>
	<div id="tabs-1">
		<p>11111111111111111111111111111111111</p>
	</div>
	<div id="tabs-2">
		<p>222222222222222222222222222222222222</p>
	</div>
	<div id="tabs-3">
		<p>333333333333333333333333333333333333333</p>
	</div>
    <div id="tabs-4">
		<p>4444444444444444444444444444444444444444</p>
	</div>
</div>

</div><!-- End demo -->

<div class="demo-description">

<p>Click tabs to swap between content that is broken into logical sections.</p>

</div><!-- End demo-description -->
</body>
</html>
